<template>
  <template v-if="type == 'circle'">
    <view class="circle-loading-container">
      <image class="icon" src="https://rwstatic.tentons.cn/web/Lesson/images/circle-loading.png">
      </image>
      <text v-show="showText">上传中</text>
    </view>
  </template>
  <template v-if="type == 'dot'">
    <view class="dot-loading-container">
      <view class="loading"></view>
    </view>
  </template>
</template>

<script setup lang="ts">
  import { defineEmits, onMounted } from "vue";

  interface Props {
    type: 'circle' | 'dot';
    showText: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    type: 'dot',
    showText: true
  });

  const emits = defineEmits(['onStart']);

  onMounted(() => {
    emits('onStart');
  });
</script>

<style lang="scss" scoped>
  @keyframes dotFlashing {
    0% {
      background-color: #7C2D10;
    }

    50% {
      background-color: #A87F71;
    }

    100% {
      background-color: #A87F71;
      opacity: .5;
    }
  }

  @keyframes circleRote {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  // 旋转
  .circle-loading-container {
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
      animation: circleRote 1s linear infinite;
      width: 1.2em;
      height: 1.2em;
      margin-right: .2rem;
    }
  }

  // 点状
  .dot-loading-container {
    display: flex;
    justify-content: center;

    .dot-common-style {
      width: .6rem;
      height: .6rem;
      border-radius: 50%;
      display: inline-block;
      animation: dotFlashing 1s infinite alternate;
      background-color: #A87F71;
      top: 0;
      content: '';
    }

    .loading {
      @extend .dot-common-style;
      position: relative;
      animation-delay: .5s;
    }

    .loading::before {
      @extend .dot-common-style;
      left: -1rem;
      animation-delay: 0s;
      position: absolute;
    }

    .loading::after {
      @extend .dot-common-style;
      right: -1rem;
      animation-delay: 1s;
      position: absolute;
    }
  }
</style>